<template>
    <div class="bottom-icons">
        <div class="icon-container">
            <div v-for="(icon, index) in iconList" :key="index" class="icon-item"
                :class="{ active: selectedIndex === index }" @click="handleIconClick(index, icon.path)">
                <img :src="selectedIndex === index ? icon.selSrc : icon.src" :alt="icon.name" />
                <span class="icon-label">{{ icon.name }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 定义组件的事件
const emit = defineEmits(['iconClick'])

const route = useRoute()
const router = useRouter()

// 图标列表数据
const iconList = ref([
    {
        name: '运营大脑',
        src: new URL('../assets/icon/icon1.png', import.meta.url).href,
        selSrc: new URL('../assets/icon/icon1_sel.png', import.meta.url).href,
        path: '/operate-brain'
    },
    {
        name: '公共安全',
        src: new URL('../assets/icon/icon2.png', import.meta.url).href,
        selSrc: new URL('../assets/icon/icon2_sel.png', import.meta.url).href,
        // path: '/public-safety'
        path: ''
    },
    {
        name: '公共管理',
        src: new URL('../assets/icon/icon3.png', import.meta.url).href,
        selSrc: new URL('../assets/icon/icon3_sel.png', import.meta.url).href,
        path: '' // 路径待定
    },
    {
        name: '公共服务',
        src: new URL('../assets/icon/icon4.png', import.meta.url).href,
        selSrc: new URL('../assets/icon/icon4_sel.png', import.meta.url).href,
        path: '' // 路径待定
    },
    {
        name: '数字经济',
        src: new URL('../assets/icon/icon5.png', import.meta.url).href,
        selSrc: new URL('../assets/icon/icon5_sel.png', import.meta.url).href,
        path: '/digital-economy'
    }
])

const selectedIndex = ref(0)

// 根据当前路由更新 selectedIndex
const updateSelectedIndex = (path) => {
    const index = iconList.value.findIndex(icon => icon.path === path)
    if (index !== -1) {
        selectedIndex.value = index
    }
}

// 监听路由变化
watch(() => route.path, (newPath) => {
    updateSelectedIndex(newPath)
}, { immediate: true })

// 图标点击处理函数
const handleIconClick = (index, path) => {
    if (path && path !== route.path) {
        router.push(path)
    }
    emit('iconClick', { index, name: iconList.value[index].name, path })
}
</script>

<style scoped lang="scss">
/* 底部图标导航样式 */
.bottom-icons {
    position: absolute;
    bottom: 2.5vh; // 增大底部距离
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    pointer-events: auto;

    .icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.2vw; // 进一步减小间距
        background: rgba(255, 255, 255, 0.05); // 透明毛玻璃背景
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1vw; // 进一步减小圆角
        box-shadow: 0 0.3vh 1.5vw rgba(0, 0, 0, 0.3);
        padding: 0.8vh 1.5vw; // 进一步减小内边距

        .icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 2.8vw; // 进一步减小最小宽度
            background: transparent; // 去掉方框背景
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none; // 去掉边框
            border-radius: 0.8vw; // 进一步减小圆角
            box-shadow: none; // 去掉阴影
            padding: 0.6vh 0.5vw; // 进一步减小内边距

            img {
                width: 1.8vw; // 进一步减小图标尺寸
                height: 1.8vw;
                object-fit: contain;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                filter: drop-shadow(0 0.1vh 0.3vw rgba(0, 0, 0, 0.3));
            }

            .icon-label {
                font-size: calc(10px + 0.2vw); // 进一步减小字体
                color: rgba(255, 255, 255, 0.9);
                margin-top: 0.4vh; // 进一步减小间距
                text-align: center;
                font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                white-space: nowrap;
                font-weight: 500;
                text-shadow: 0 0.1vh 0.2vw rgba(0, 0, 0, 0.5);
            }

            &:hover {
                background: rgba(255, 255, 255, 0.08); // 轻微的毛玻璃效果
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                transform: translateY(-0.5vh) scale(1.05); // 增大悬浮效果

                img {
                    transform: scale(1.15);
                    filter: drop-shadow(0 0.3vh 1vw rgba(0, 174, 255, 0.4));
                }

                .icon-label {
                    color: rgba(255, 255, 255, 1);
                    text-shadow: 0 0 0.5vw rgba(0, 174, 255, 0.6);
                }
            }

            &.active {
                background: rgba(0, 174, 255, 0.15); // 透明的激活背景
                backdrop-filter: blur(15px);
                -webkit-backdrop-filter: blur(15px);
                border: 1px solid rgba(0, 174, 255, 0.3);
                transform: scale(1.1);

                .icon-label {
                    color: #00d4ff;
                    font-weight: 600;
                    text-shadow: 0 0 0.8vw rgba(0, 174, 255, 0.8);
                }

                img {
                    filter: drop-shadow(0 0 1vw rgba(0, 174, 255, 1));
                    transform: scale(1.1);
                }
            }
        }
    }
}
</style>